import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './mutation-types'
import * as actions from './actions'
import * as getters from './getters'
//import * as mutations from './mutations'
// import * as state from './state'

Vue.use(Vuex)
const state = {
  alertObj: {
    show: false,
    msg: '提示信息',
    type: 'info' // 四种样式 success/info/warning/danger
  },
  confirmObj: {
    show: false,
    msg: '提示信息',
    event: 'func'
  },
  checkedItems: [],
  historyList: [],
  isChangePic: false,
  currentPage: 1,
  rightTabIndex: 0,
  workData: {
    svgColors: {},
    copyItem: {},
    about: {
      desc: '',
      keyWords: '',
      thumbnail: ''
    },
    sceneinfo: {},
    userinfo: {},
    pages: [{
      id: 837949,
      sceneId: 107961,
      num: 1,
      name: "",
      pagebg: {},
      elements: []
    }],
    main: {
      background: '#fff',
      height: 486,
      type: ''
    },
  }

}


var getAllItemsLen = function (state) {
  return state.workData.pages[state.currentPage - 1].elements.length;
};

// 交换数组元素
var swapItems = function (arr, index1, index2) {
  // debugger
  arr[index1] = arr.splice(index2, 1, arr[index1])[0];

  return arr;
};

// 上移
var upRecord = function (arr, index) {
  // debugger
  if (index == 0) {
    return;
  }
  swapItems(arr, index, index - 1);
};

// 下移
var downRecord = function (arr, index) {
  // debugger
  if (index == arr.length - 1) {
    return;
  }

  swapItems(arr, index, index + 1);
};


var tpl = {
  txt: function (index, num, params) {
    return {
      type: 2,
      content: params.text,
      src: "",
      out: {
        css: {
          width: 400,
          height: params.height,
          top: params.top,
          left: 87,
          opacity: 1,
          transform: "rotate(0deg)"
        },

      },
      in: {
        css: {
          width: 400,
          height: params.height,
          backgroundColor: "",
          fontFamily: params.fontFamily,
          bolderWidth: "0px",
          borderColor: "#000000",
          borderStyle: "none",
          borderRadius: "0px",
          fontStyle: "normal",
          fontWeight: params.fontWeight,
          fontDecoration: "none",
          textAlign: "left",
          textValign: "middle",
          color: "rgb(103, 103, 103)",
          fontSize: params.fontSize,
          lineHeight: params.lineHeight,
          boxShadow: "black 0px 0px 0",
          letterSpacing: "0px"
        },
        properties: {
          hasUrl: 0,
        }
      },
      anim: []

    };
  },
  pic: function (index, num, params) {
    return {
      anim: [],
      content: "",
      in: {
        css: {
          height: params.height,
          width: params.width,
          marginLeft: "0px",
          marginTop: "0px",
        },
        properties: {}
      },
      out: {
        css: {
          backgroundColor: "",
          borderBottomLeftRadius: "0px",
          borderBottomRightRadius: "0px",
          borderColor: "rgba(0,0,0,1)",
          borderRadius: "0px",
          borderRadiusPerc: "0",
          borderStyle: "solid",
          borderTopLeftRadius: "0px",
          borderTopRightRadius: "0px",
          borderWidth: "0",
          boxShadow: "0px 0px 0px rgba(0,0,0,0.5)",
          boxShadowDirection: "0",
          boxShadowSize: "0",
          color: "#676767",
          height: params.height,
          width: params.width,
          left: "180",
          lineHeight: "1",
          opacity: "1",
          paddingBottom: "0",
          paddingTop: "0",
          textAlign: "left",
          top: "44",
          transform: "rotateZ(0deg)",
          zIndex: 0,
        }
      },

      src: params.src,
      type: "4",
    };
  },
  svg: function (index, num, params) {
    return {
      anim: [],
      content: "",
      in: {
        css: {
          height: params.height,
          width: params.width,
          marginLeft: "0px",
          marginTop: "0px"
        },
        properties: {
          colors: {
            color0: ""
          },
        }
      },
      out: {
        css: {
          backgroundColor: "",
          borderBottomLeftRadius: "0px",
          borderBottomRightRadius: "0px",
          borderColor: "rgba(0,0,0,1)",
          borderRadius: "0px",
          borderRadiusPerc: "0",
          borderStyle: "solid",
          borderTopLeftRadius: "0px",
          borderTopRightRadius: "0px",
          borderWidth: "0",
          boxShadow: "0px 0px 0px rgba(0,0,0,0.5)",
          boxShadowDirection: "0",
          boxShadowSize: "0",
          color: "#676767",
          height: params.height,
          width: params.width,
          left: "180",
          lineHeight: "1",
          opacity: "1",
          paddingBottom: "0",
          paddingTop: "0",
          textAlign: "left",
          top: "44",
          transform: "rotateZ(0deg)",
          zIndex: 0
        }
      },

      src: params.src,
      type: "h",
    };
  },
  maps: function (index, num, params) {
    return {
      "type": "m",
      "content": "",
      "src": "",
      "out": {
        "css": {
          "width": 400,
          "height": 300,
          "top": 354,
          "left": 50,
          "opacity": 1,
          "transform": "rotate(0deg)"
        },
        "properties": []
      },
      "in": {
        "css": {
          "width": 400,
          "height": 200
        },
        "properties": {
          "address": params.address,
          "lat": params.lat,
          "lng": params.lng,
          "zoom": 20
        }
      },
      "anim": [
        {
          "type": "fadeInNormal",
          "duration": 1,
          "delay": 0.6,
          "count": 1
        }
      ]
    };
  },
  form: function (index, num, params) {
    return {
      content: '<div class="element-box-contents" style="width: 100%; height: 100%"><textarea id="5013705409" ctype="501" class="element comp_input editable-text" maxlength="300" name="eq[f_5013705409]" style="width: 223px; height: 40px; box-sizing: border-box; -webkit-user-select: none;" placeholder="姓名"></textarea></div>',
      css: {
        color: "rgba(255,255,255,1)",
        height: 'auto',
        left: '0px',
        top: '0px',
        width: '223px',
        zIndex: 0 + ""
      },
      id: "4880-" + index,
      pageId: "711429",
      pid: "4880",
      properties: {
        anim: [],
        height: '0px',
        width: '0px'
      },
      sceneId: "92405",
      sid: index + "",
      sort: index - 1 + "",
      type: '5'
    };
  },
  buttons: function (index, num, params) {
    return {
      content: '<div class="element-box-contents" style="width: 100%; height: 100%"><button style="display: block;width: 100%;height: 100%;" id="6880677173" ctype="6" class="element comp_button editable-text">提交</button></div>',
      css: {
        color: "rgba(255,255,255,1)",
        height: 'auto',
        left: '0px',
        top: '0px',
        width: '100%',
        zIndex: 0 * 10 + ""
      },
      id: "4880-" + index,
      pageId: "711429",
      pid: "4880",
      properties: {
        anim: [],
        height: '0px',
        width: '0px'
      },
      sceneId: "92405",
      sid: index + "",
      sort: index - 1 + "",
      type: '5'
    }
  },
  video: function (index, num, params) {
    return {
      type: 'video',
      style: 'z-index:' + 0 * 10 + ';width:320px;top:0px;left:0px;box-sizing:border-box;position: absolute;',
      class: params.className ? params.className : '',
      id: 'n_' + num,
      attr: {},
      content: '<video style="width:100%;height:100%;box-sizing:border-box;background-color: rgba(0,0,0,0);box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);" data-vid="' + videoid + '" poster="' + pic_url + '" controls="controls" preload="none" src="http://video.proc.sina.cn/video_explore/location.php?video_id=' + videoid + '">您的浏览器不支持video标签。</video>'
    };
  },
  pic1: function (index, num, params) {
    return {

      "pid": "4880",
      "sid": "1",
      "sort": "0",
      "type": "4",
      "content": "",
      "css": {
        "top": -11,
        "left": -16,
        "zIndex": 0 * 10,
        "width": 156.8,
        "height": 156.8
      },
      "properties": {
        "width": 156.8,
        "height": 156.8,
        "src": params.src,
        "imgStyle": {
          "width": 156.8,
          "height": 156.8,
          "marginTop": "0px",
          "marginLeft": "-8px",
          "top": -5,
          "left": -8
        },
        "anim": [],
        "url": "",
        "clc": "edit_move"
      },
      "id": "4880-1",
      "pageId": "643",
      "sceneId": 2079
    };
  },
  countDown: function (index, num, params) {
    return {
      "type": "countDown",
      "content": "",
      "src": "",
      "out": {
        "css": {
          "width": 550,
          "height": 100,
          "top": 764,
          "left": 57,
          "opacity": 1,
          "transform": "rotate(0deg)"
        },
        "properties": []
      },
      "in": {
        "css": {
          "width": 550,
          "height": 100,
          "color": "#000",
          "fontSize": "36px",
          "lineHeight": 1.5,
          "backgroundColor": "",
          "borderRadius": "0px",
          "borderWidth": "0px",
          "borderStyle": "none",
          "borderColor": "#ffffff",
          "textAlign": "center",
        },
        "properties": {
          "deadlineTime": params,
          "endtip": "已结束"
        }
      },
      "anim": []
    }
  },

  phoneButton: function (index, num, params) {
    return {
      "type": 'phoneCallButton',
      "content": "拨打电话",
      "src": "",
      "out": {
        "css": {
          "width": 240,
          "height": 80,
          "top": 403,
          "left": 200,
          "opacity": 1,
          "transform": "rotate(0deg)"
        },
        "properties": []
      },
      "in": {
        "css": {
          "width": 240,
          "height": 80,
          "color": "#fff",
          "fontSize": "36px",
          "lineHeight": 2,
          "backgroundColor": "#1abd9b",
          "borderRadius": "20px",
          "borderWidth": "0px",
          "borderStyle": "none",
          "borderColor": "#1abd9b",
          "textAlign": "center",
        },
        "properties": {
          "tel": "88888888"
        }
      },
      "anim": []
    }
  },
  dianzanButton: function (index, num, params, id) {
    return {
      "type": 'interActionButton',
      "content": "点赞",
      "src": "",
      "out": {
        "css": {
          "width": 240,
          "height": 80,
          "top": 500,
          "left": 200,
          "opacity": 1,
          "transform": "rotate(0deg)"
        },
        "properties": []
      },
      "in": {
        "css": {
          "width": 240,
          "height": 80,
          "color": "#fff",
          "fontSize": "36px",
          "lineHeight": 2,
          "backgroundColor": "#1abd9b",
          "borderRadius": "20px",
          "borderWidth": "0px",
          "borderStyle": "none",
          "borderColor": "#1abd9b",
          "textAlign": "center",
        },
        "properties": {
          "id": id,
          "type": "",
        }
      },
      "anim": []
    }
  },
  linkButton: function (index, num, params) {
    return {
      "type": 'linkButton',
      "content": "跳转",
      "src": "",
      "out": {
        "css": {
          "width": 240,
          "height": 80,
          "top": 763,
          "left": 200,
          "opacity": 1,
          "transform": "rotate(0deg)"
        },
        "properties": []
      },
      "in": {
        "css": {
          "width": 240,
          "height": 80,
          "color": "#fff",
          "fontSize": "36px",
          "textAlign": "center",
          "lineHeight": 2,
          "backgroundColor": "#1abd9b",
          "borderRadius": "20px",
          "borderWidth": "0px",
          "borderStyle": "none",
          "borderColor": "",
          "textAlign": "center",
        },
        "properties": {
          "url": "http://www.yaoyue365.com"
        }
      },
      "anim": []
    }
  },
  form_input: function (index, num, params, formid, id) {
    return {
      "type": "i",
      "id": id,
      "inputType": "name",
      "moduleType": "contact",
      "formid": formid,
      "content": "",
      "src": "",
      "out": {
        "css": {
          "width": "400",
          "height": "72",
          "top": "100",
          "left": "27",
          "opacity": "1",
          "transform": "rotate(0deg)"
        },
        "properties": []
      },
      "in": {
        "css": {
          "width": "400",
          "height": "72",
          "borderWidth": "2px",
          "borderColor": "#ffffff",
          "borderStyle": "solid",
          "boxshadow": "0",
          "background": "#ffffff",
          "borderRadius": "0px",
          "color": "#4B4B4B ",
          "fontSize": "28px",
          "lineHeight": "72px",
          "padding": "20px"
        },
        "properties": {
          "placeholder": "姓名",
          "regularType": "normal",
          "require": "1"
        }
      },
      "anim": []
    }
  },
  form_submit: function (index, num, params, formid, id) {
    return {
      "type": "s",
      "id": id,
      "inputType": "submit",
      "moduleType": "submit",
      "formid": formid,
      "content": "",
      "src": "",
      "out": {
        "css": {
          "width": "400",
          "height": "72",
          "top": "611",
          "left": "27",
          "opacity": "1",
          "transform": "rotate(0deg)"
        },
        "properties": []
      },
      "in": {
        "css": {
          "width": "400",
          "height": "72",
          "borderWidth": "0px",
          "borderColor": "#ffffff",
          "borderStyle": "solid",
          "boxshadow": "0",
          "textAlign": "center",
          "background": "#d94857",
          "borderRadius": "8px",
          "color": "#ffffff",
          "fontSize": "32px",
          "lineHeight": "72px"
        },
        "properties": {
          "str": "提交",
          "ok": "感谢你的填写"
        }
      },
      "anim": []
    }
  }
};

const mutations = {

  [types.INITDATA](state, params) {
    //		if(localStorage[data._id] && localStorage[data._id] !== 'null' && !_.isEqual(JSON.parse(localStorage[data._id]), data) && window.confirm('检测到本地存在未保存数据，是否应用？')) {
    //			state.workData = JSON.parse(localStorage[data._id]);
    //		} else {
    // var XX = params.lists.splice(1,3);
    // debugger
    state.workData.pages = params.lists;
    state.workData.sceneinfo = params.sceneinfo;

    //		}
    //		localStorage.removeItem(data._id);
  },
  [types.INITUSERDATA](state, params){
    state.workData.userinfo = params.userinfo;
  },
  [types.CHANGEUSERDATA](state, params){
    state.workData.userinfo[params.key] = params.value;
  },
  [types.REPLACETEMPLATE](state, params) {

    // var currentPageData = state.workData.pages[state.currentPage - 1];
    // state.workData.pages[state.currentPage - 1] = [];

    state.workData.pages[state.currentPage - 1].elements = params.value.elements;
    state.workData.pages[state.currentPage - 1].pagebg = params.value.pagebg;
    state.workData.pages[state.currentPage - 1].thumb = params.value.thumb;
  },
  [types.CHANGERIGHTFUNCTAB](state, params) {
    if (params.index == state.rightTabIndex) {
      return;
    }
    if (params.isChangePic == true) {
      state.isChangePic = true;
    } else {
      state.isChangePic = false;
    }
    state.rightTabIndex = params.index;
  },


  [types.ALERT](state, params) {

    state.alertObj.show = params.show;
    state.alertObj.msg = params.msg || '提示信息';
    state.alertObj.type = params.type || 'info';
  },

  [types.HIDEALERT](state) {

    state.alertObj.show = false;

  },

  [types.HIDEALERT](state, params) {
    state.confirmObj.show = params.show;
    state.confirmObj.msg = params.msg || '提示信息';
    state.confirmObj.event = params.event || null;
  },

  [types.HIDECONFIRM](state) {
    state.confirmObj.show = false;
  },

  [types.SETSTYLETWO](state, params) {
    var currentPageData = state.workData.pages[state.currentPage - 1];
    var index = params.index;
    var item1 = state.workData.pages[state.currentPage - 1].elements[index];
    var result = "";
    var result1 = {};
    var resultStr = "";
    if (params.params.isSc) {
      // imageStyle  content

      if (currentPageData.elements[index].type == 4) {
        // imageStyle
        result = item1.properties.imgStyle;
        for (var item in params.params) {

          if (item === "index") {
            continue
          }
          if (item === "isSc") {
            continue
          }
          if (params.params[item] === '' && result[item]) {
            delete result[item];
          } else {
            result[item] = params.params[item];
          }
          for (var obj in result) {
            var value = result[obj];
            result1[obj] = value
          }
          result1['display'] = 'block';
          result1.width = '100%';
          result1.height = '100%';
          result1['box-sizing'] = 'border-box';
        }
        item1.properties.imgStyle = result1;
      } else {
        //content
        result = item1.properties.imgStyle;
        var resultStr1 = '';
        for (var item in result1) {
          resultStr1 += item + ':' + result[item] + ';'
        }
        var str1 = item1.content.replace(/span style=\"([\s\S]+?)\"/, 'style="' + resultStr1 + '"');
        var str = item1.content.match(/span style=\"([\s\S]+?)\"/);
        //				match(/style=\"([\s\S]+?)\"/)[1]
        item.content = resultStr1;
      }
    } else {
      if (currentPageData.elements[index].type == 4) {
        // imageStyle
        result = item1.properties.imgStyle;
        for (var item in params.params) {

          if (item === "index") {
            continue
          }
          if (item === "isSc") {
            continue
          }
          if (params.params[item] === '' && result[item]) {
            delete result[item];
          } else {
            result[item] = params.params[item];
          }
        }
      }
      //			item.style=
    }

  },

  [types.SETSTYLE](state, params) {

    //		isIn = true
     // debugger
     console.log( "34545435435-")
    var currentPageData = state.workData.pages[state.currentPage - 1];
    var index = params.index;
    var str = currentPageData.elements[index].out.css;
    var result = str;

    // debugger
    for (var item in params.params) {
      if (item === "index") {
        continue
      }
      if (params.params[item] === '' && result[item]) {
        delete result[item];
      } else {
        result[item] = params.params[item];
      }
    }
    var resultStr = '';
    for (var item in result) {
      resultStr += item + ':' + result[item] + ';'
    }
    var item = state.workData.pages[state.currentPage - 1].elements[index];
    //		var imgwidth = item.properties.imgStyle.width

    var result1 = {}
    for (var obj in result) {
      var str = result[obj] + "";
      var value = str.replace(/(^\s+)|(\s+$)/g, '');
      result1[obj] = value
    }

    if (params.move) { //拖拽
      //				item.css= result1;
      if (result1.top.split("px")[0] != "0" || result1.left.split("px")[0] != "0") {
        item.out.css.top = parseInt(result1.top.split("px")[0]) + "";
        item.out.css.left = parseInt(result1.left.split("px")[0]) + "";
      }

      console.log( item.out.css.left + "2----------------------")
    } else { //改变大小
      //				item.imagsStyle = result1;
      if (result1.top !== "0") {


        if (item.type == 'i') {

          item.out.css.top = result1.top.split("px")[0] + "";
          item.in.css.top = 0 + "";
        } else {
          item.out.css.top = result1.top.split("px")[0] + "";
          item.in.css.top = 0 + "";

        }
        // if (item.type == "4") {
        //     item.properties.imgStyle.top = result1.top;
        // }
        // if (item.type == "8") {
        //     item.css.top = result1.top;
        //     // console.log(result1.top)
        //     // console.log(item.css.top)
        // }
      }
      if (result1.left !== "0") {
        // item.out.css.left = result1.left.split("px")[0] + "";
        // item.in.css.left = result1.left.split("px")[0] + "";
        if (item.type == 'i') {

          item.out.css.left = result1.left.split("px")[0] + "";
          item.in.css.left = 0 + "";
        } else {
          item.out.css.left = result1.left.split("px")[0] + "";
          item.in.css.left = 0 + "";

        }
      }
      if (result1.width !== "0") {
        item.out.css.width = result1.width.split("px")[0] + "";
        item.in.css.width = result1.width.split("px")[0] + "";
        // if (item.type == "4") {
        //     item.properties.imgStyle.width = params.params.imgwidth + params.params.difX
        //     item.properties.imgStyle.marginTop = parseInt(params.params.margintop.split("px")[0]) + params.params.difY;
        // }
        // if (item.type == "8") {
        //     item.css.width = result1.width;
        // }
      }
      if (result1.height !== "0") {
        item.out.css.height = result1.height.split("px")[0] + "";
        item.in.css.height = result1.height.split("px")[0] + "";
        // if (item.type == "4") {
        //     item.properties.imgStyle.height = params.params.imgheight + params.params.difY;
        //     item.properties.imgStyle.marginTop = parseInt(params.params.margintop.split("px")[0]) + params.params.difY;
        // }
        // if (item.type == "8") {
        //     item.css.height = result1.height;
        // }
      }
    }
    mutations.SELECTITEM(state, state.checkedItems[0]);
  },

  [types.SETANIMSTYLE](state, params) {
    var currentPageData = state.workData.pages[state.currentPage - 1];
    //index
    var index = params.index;
    var ani = params.ani;
    if (ani instanceof Array) {
      currentPageData.elements[index].properties.anim = ani;
    } else {
      //aniIndex
      var aniIndex = params.aniIndex;
      var anim = currentPageData.elements[index].properties.anim;
      anim[aniIndex].type = parseInt(ani.type);
      anim[aniIndex].direction = ani.direction;
      anim[aniIndex].duration = ani.duration;
      anim[aniIndex].delay = ani.delay;
      anim[aniIndex].countNum = ani.countNum;
      anim[aniIndex].none = ani.none;
    }
  },
  [types.ADDORDELANI](state, params) {
    var currentPageData = state.workData.pages[state.currentPage - 1];
    //index
    var index = params.index;
    //aniIndex
    var aniIndex = params.aniIndex;
    var addOrDel = params.addOrDel;

    var anim = currentPageData.elements[index].properties.anim;
    var ani = params.ani;
    // add
    if (addOrDel) {
      //anim.push(ani);
    } else {
      anim.splice(aniIndex, 1);
    }
  },

  [types.ADDCLASS](state, obj) {
    var index = obj.index;
    var className = obj.className;
    var item = state.workData.pages[state.currentPage - 1].elements[index];
    var classStr = item.properties;
    //var classArray = classStr.split(' ');
    if (classStr.className == undefined) {
      classStr.className
    }
    //		for(var i = 0; i < classStr.anim.length; i++) {
    if (className !== classStr.anim) {
      classStr[className];
    }
    var obj = {};
    obj["type"] = "";
    obj["direction"] = "";
    obj["duration"] = "";
    obj["delay"] = "";
    obj["countNum"] = "";
    obj["count"] = "";
    obj["linear"] = "";
    classStr.anim.push(obj)

    //		}
    //		item.class = classArray.join(' ').replace(/(^\s+)|(\s+$)/g, '');
    item.properties = classStr;
  },

  [types.REMOVECALSS](state, index, className) {
    var item = state.workData.pages[state.currentPage - 1].elements[index];
    var classStr = item.class;
    var classArray = classStr.split(' ');
    for (var i = 0; i < classArray.length; i++) {
      if (className === classArray[i]) {
        delete classArray[i];
      }
    }
    item.class = classArray.join(' ').replace(/(^\s+)|(\s+$)/g, '');
  },

  [types.ADDTEXT](state,params) {
    // debugger
    var items = state.workData.pages[state.currentPage - 1].elements;
    var index = items.length + 1;
    var num = getAllItemsLen(state) + 1;

    var p = {};
    if(params == 1){
      p.fontSize = '96px';
      p.fontWeight = 'bold';
      p.fontFamily = 'Microsoft YaHei';
      p.top = '70';
      p.height = '130';
      p.lineHeight = '1.3';
      p.text = '大标题';
    }else if(params == 2){
      p.fontSize = '60px';
      p.fontWeight = 'bold';
      p.fontFamily = 'Microsoft YaHei';
      p.top = '180';
      p.height = '80';
      p.lineHeight = '1.3';
      p.text = '标题';
    }else if(params == 3){
      p.fontSize = '40px';
      p.fontWeight = 'normal';
      p.fontFamily = 'Microsoft YaHei';
      p.top = '250';
      p.height = '70';
      p.lineHeight = '1.8';
      p.text = '副标题';
    }else if(params == 4){
      p.fontSize = '36px';
      p.fontWeight = 'normal';
      p.fontFamily = 'Microsoft YaHei';
      p.top = '320';
      p.height = '55';
      p.lineHeight = '1.6';
      p.text = '小标题';
    }else if(params == 5){
      p.fontSize = '28px';
      p.fontWeight = 'normal';
      p.fontFamily = 'Microsoft YaHei';
      p.top = '400';
      p.height = '50';
      p.lineHeight = '1.8';
      p.text = '正文内容';
    }else{
      p.fontSize = '40px';
      p.fontFamily = 'Microsoft YaHei';
      p.top = '70';
      p.fontWeight = 'bold';
      p.height = '70';
      p.lineHeight = '1.5';
      p.text = '双击此处进行编辑';
    }
    var txtData = tpl.txt(index, num, p);
    items.push(txtData);

    mutations.PUTHISTORY(state);
    mutations.SELECTITEM(state, index - 1);
  },

  [types.ADDFORM](state) {
    var items = state.workData.pages[state.currentPage - 1].elements;
    var index = items.length + 1;
    var num = getAllItemsLen(state) + 1;
    var txtData = tpl.form(index, num, {});
    items.push(txtData);
    mutations.SELECTITEM(state, index - 1);
  },

  [types.ADDBUTTON](state) {
    var items = state.workData.pages[state.currentPage - 1].elements;
    var index = items.length + 1;
    var num = getAllItemsLen(state) + 1;
    var txtData = tpl.buttons(index, num, {});
    items.push(txtData);
    mutations.SELECTITEM(state, index - 1);
  },

  [types.CHANGETEXT](state, params) {
    var checkItem = state.workData.pages[state.currentPage - 1].elements[params.itemIndex];

    checkItem.content = params.textValue;

  },
  [types.CHANGETEXTSTYLE](state, params) {
    // debugger
    var inObj = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]].in;
    var outObj = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]].out;
    var inCssObj = inObj.css; //[]''
    var inProObj = inObj.properties

    // var f = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]].in.fonts;//
    if (inCssObj.length == 0) {

      delete inObj.css;
      inObj.css = {};
    }
    if (inProObj.length == 0) {

      delete inObj.properties;
      inObj.properties = {};
    }
    if (params.type == "out") {


      if (params.key == "opacity") {

        // console.log(parseFloat((1 - params.value / 100).toFixed(2)));
        console.log(parseFloat((1 - params.value / 100).toFixed(2)) * 100);
        outObj.css[params.key] = parseFloat((1 - params.value / 100).toFixed(2));

      } else {

        outObj.css[params.key] = params.value;
      }

    } else {

      //

      if (params.key == "writingMode") {

        inObj.css[params.key] = params.value;

        var temple1 = outObj.css.width;
        outObj.css.width = outObj.css.height;
        outObj.css.height = temple1;

        var temple2 = inCssObj.width;
        inCssObj.width = inCssObj.height;
        inCssObj.height = temple2;


      } else if (params.key == "hasUrl" || params.key == "jumpPageNumber" || params.key == "jumpUrl") {

        inProObj[params.key] = params.value;

      } else {

        inObj.css[params.key] = params.value;

      }
    }


    mutations.SELECTITEM(state, state.checkedItems[0]);

  },

  [types.CHANGEPICSTYLE](state, params) {
    var inObj = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]].in;
    var outObj = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]].out;
    var inCssObj = inObj.css; //[]
    var inProObj = inObj.properties
    // var f = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]].in.fonts;//
    if (inCssObj.length == 0) {

      delete inObj.css;
      inObj.css = {};
    }
    if (inProObj.length == 0) {

      delete inObj.properties;
      inObj.properties = {};
    }

    if (params.type == "out") {


      if (params.key == "opacity") {

        // console.log(parseFloat((1 - params.value / 100).toFixed(2)));
        // console.log(parseFloat((1 - params.value / 100).toFixed(2)) * 100);
        outObj.css[params.key] = parseFloat((1 - params.value / 100).toFixed(2));

      } else {

        outObj.css[params.key] = params.value;

      }

    } else {

      //

      if (params.key == "opacity") {

        // console.log(parseFloat((1 - params.value / 100).toFixed(2)));
        // console.log(parseFloat((1 - params.value / 100).toFixed(2)) * 100);
        inObj.css[params.key] = parseFloat((1 - params.value / 100).toFixed(2));

        // outObj.css[params.key] = parseFloat((1 - params.value / 100).toFixed(2));
      } else if (params.key == "width" || params.key == "height") {

        outObj.css[params.key] = params.value;
        inObj.css[params.key] = params.value;

      } else if (params.key == "hasUrl" || params.key == "jumpPageNumber" || params.key == "jumpUrl") {

        inProObj[params.key] = params.value;

      } else {

        inObj.css[params.key] = params.value;

      }

    }


    mutations.SELECTITEM(state, state.checkedItems[0]);

  },

  [types.ADDPICORBG](state, params) {
    // debugger
    var items = state.workData.pages[state.currentPage - 1].elements;
    var pagebgObj = state.workData.pages[state.currentPage - 1].pagebg
    var pages = state.workData.pages
    if (params.type === 'pic') {


    } else if (params.type === 'bg') {

      //背景颜色
      if (params.subType == 1) {


        pagebgObj.backgroundColor = params.color;
        pagebgObj.backgroundImage = "";
        //单个背景图片
      } else if (params.subType == 2) {

        pagebgObj.backgroundColor = "";
        pagebgObj.backgroundImage = params.src;
        //所有背景图片
      } else {

        for (var i = 0; i < pages.length; i++) {
          pages[i].pagebg.backgroundColor = "";
          pages[i].pagebg.backgroundImage = params.src;
        }

      }

      mutations.PUTHISTORY(state);
    }
  },

  [types.ADDSYSFILE](state, params) {
    var items = state.workData.pages[state.currentPage - 1].elements;
    var checkItem = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]];

    if (params.type === 'pic') {

      if (state.isChangePic) {

        checkItem.src = params.src
      } else {

        state.checkedItems = [];
        var index = items.length + 1;
        var num = getAllItemsLen(state) + 1;
        // debugger
        var picData = tpl.pic(index, num, {
          src: params.src,
          width: params.width,
          height: params.height
        });
        items.push(picData);
        mutations.SELECTITEM(state, index - 1);
      }
    } else if (params.type === 'bg') {
      items.push(params.baseUrl + params.item.path);
    } else if (params.type === 'svg') {
      //debugger
      state.checkedItems = [];
      var index = items.length + 1;
      var num = getAllItemsLen(state) + 1;
      var picData = tpl.svg(index, num, {
        src: params.src,
        width: params.width,
        height: params.height
      });
      items.push(picData);
      mutations.SELECTITEM(state, index - 1);
    }
    mutations.PUTHISTORY(state);
  },
  [types.DELBG](state) {
    // state.currentPageMain.background = '#fff';
    state.workData.pages.main.background = '#fff';
  },

  [types.ADDBGMUSIC](state, src, name) {
    state.workData.mainCode.wholeAttr.bgmusic = src;
    state.workData.mainCode.wholeAttr.bgmusicName = name;
  },

  [types.DElBGMUSIC](state) {
    state.workData.mainCode.wholeAttr.bgmusic = '';
    state.workData.mainCode.wholeAttr.bgmusicName = '';
  },

  //添加倒计时
  [types.ADDCOUNTDOWN](state, param) {
    var items = state.workData.pages[state.currentPage - 1].elements;
    var index = items.length + 1;
    var num = getAllItemsLen(state) + 1;
    var txtData = tpl.countDown(index, num, param);
    // state.countDown.push(param);
    items.push(txtData);
    mutations.SELECTITEM(state, index - 1);
  },
  [types.ADDCOMPOENT](state, param) {
    var items = state.workData.pages[state.currentPage - 1].elements;
    var index = items.length + 1;
    var num = getAllItemsLen(state) + 1;
    // debugger
    var compoentData = {};

    if (param.type == 1) {
      //电话
      compoentData = tpl.phoneButton(index, num, param);

    } else if (param.type == 2) {
      //网址
      compoentData = tpl.linkButton(index, num, param);


    } else if (param.type == 3) {
      //点赞

      var id = new Date().getTime();
      // debugger
      compoentData = tpl.dianzanButton(index, num, param, id);
    } else if (param.type == 4) {
      //倒计时
      var date = new Date();
      date.setDate(date.getDate() + 30);
      var time = date.getTime();
      compoentData = tpl.countDown(index, num, time);
    } else if (param.type == 5) {
      //地图
      if (param.option == 'add') {
        compoentData = tpl.maps(index, num, param.obj);
      } else if (param.option == 'update') {
        var elem=items[state.checkedItems[0]]
        elem.in.properties=param.obj;
        items.splice(state.checkedItems[0],1);
        compoentData=elem;
      }
    } else if (param.type == 100) {

      var formid = state.workData.pages[state.currentPage - 1].id;
      var id = new Date().getTime();
      // debugger
      compoentData = tpl.form_input(index, num, param, formid, id);

      // state.workData.forms.push(compoentData);


    } else if (param.type == 200) {

      for (var i = 0; i < items.length; i++) {
        // items[i].type
        if (items[i].type == 's') {

          return;
        }

      }

      var formid = state.workData.pages[state.currentPage - 1].id;
      var id = new Date().getTime();
      // debugger
      compoentData = tpl.form_submit(index, num, param, formid, id);
    }


    items.push(compoentData);

    mutations.PUTHISTORY(state);
    mutations.SELECTITEM(state, index - 1);
  },
  [types.SELECTITEM](state, index, multi) {
    if (multi) {
      state.checkedItems.push(index);
    } else {
      state.checkedItems = [];
      state.checkedItems.push(index);
    }
    // mutations.SELECTITEM(state, index);
    // debugger

    // console.log('SELECTITEM');
  },

  [types.CLEARCHECKEDITEMS](state, index, multi) {
    state.checkedItems = [];
    // state.rightTabIndex = 0;
  },

  [types.DELITEM](state) {
    var result = [];
    var items = state.workData.pages[state.currentPage - 1].elements;
    var itemObj = items[state.checkedItems[0]];

    // delete items[state.checkedItems[0]];

    items.splice(state.checkedItems[0], 1);

    // if (itemObj.type == 'i' || itemObj.type == 's') {
    //   for (var i = 0; i < state.workData.forms.length; i++) {

    //         if ( state.workData.forms[i].id == itemObj.id ) {

    //             state.workData.forms.splice(i, 1);
    //         }
    //       }
    // }


    // for (var i = 0; i < items.length; i++) {
    //   if (items[i] !== undefined) {
    //     result.push(items[i]);
    //   }
    // }
    // state.workData.pages[state.currentPage - 1].elements = result;
  },

  [types.SELECTPAGE](state, index) {
    // debugger
    state.currentPage = index;
    state.rightTabIndex = 0;
    state.checkedItems = [];

    state.historyList = [];
    // oldHistoryList = [];

    // debugger
    var items = state.workData.pages[state.currentPage - 1]
    state.historyList.push(JSON.stringify(items));

    // debugger
  },

  [types.ADDPAGE](state, params) {
    state.workData.pages.push(params.page);
    state.currentPage = state.workData.pages.length;
  },

  [types.DELPAGE](state, index) {
    // debugger
    var pagesData = JSON.stringify(state.workData.pages);
    // pagesData = result.concat(pagesData.slice(0, index), pagesData.slice(index + 1));
    var newData = JSON.parse(pagesData);
    newData.splice(index, 1);

    for (var i = 0; i < newData.length; i++) {

      newData[i].pagenum = i + 1;
    }
    state.workData.pages = newData;
    state.currentPage = state.currentPage === 1 ? 1 : state.currentPage - 1;
  },

  [types.COPYPAGE](state, params) {

    //在array数组的  index位置插入元素val
    //array.splice(index,0,val);
    var datas = JSON.stringify(state.workData.pages);
    // debugger
    var copyData = params.page;

    var newData = JSON.parse(datas);

    // debugger
    newData.splice(params.index + 1, 0, copyData);


    for (var i = 0; i < newData.length; i++) {

      newData[i].pagenum = i + 1;
    }


    state.workData.pages = newData;

    state.currentPage = params.index + 2;
    // debugger
  },

  [types.DRAGPAGE](state, params){
    for (var i = 0; i < params.length; i++) {
      params[i].pagenum = i + 1;
    }
    state.workData.pages = params;
  },

  [types.PUTHISTORY](state, params) {
    // if (params == null) {
    var oldPage = state.workData.pages[state.currentPage - 1]

    var oldHistoryList = state.historyList;
    var newHistory = {};
    // newHistory.state = 'elem';
    // newHistory.index = state.historyList.length;
    // newHistory.data = JSON.stringify(oldPage);
    // debugger
    oldHistoryList.push(JSON.stringify(oldPage));
    // } else {
    //   var oldPage = state.workData.pages[params.index];
    //   var oldHistoryList = state.historyList;
    //   var newHistory = {};
    //   newHistory.state = 'page';
    //   newHistory.index = state.historyList.length;
    //   newHistory.pageIndex = params.index;
    //   newHistory.data = JSON.stringify(oldPage);
    //   oldHistoryList.push(newHistory);
    // }

  },
  [types.UPDATECURRENTDATA](state, params) {
    // if (params.state == "elem") {
    // var result = [];
    // var items = state.workData.pages[state.currentPage - 1].elements;
    state.workData.pages[state.currentPage - 1].elements = params.elements;
    state.workData.pages[state.currentPage - 1].pagebg = params.pagebg;
    // }else if(params.state == "page"){
    //   // state.workData.pages[params.index]=params.data;
    //   state.workData.pages.splice(params.pageIndex, 0, params.data);
    // }
    // if(state.historyList.length>1) {
    //   state.historyList.splice(params.index, 1);
    // }
    // var items = state.workData.pages[state.currentPage - 1]
    // items = params;
    console.log(state.workData.pages)
  },
  [types.CLEARCURRENTPAGE](state) {
    state.workData.pages[state.currentPage - 1].elements = [];
  },

  //修改场景信息
  [types.CHANGESCENEINFO](state, params) {

    // debugger
    var keyArray = params.keys;
    var valueArray = params.values;
    for (var i = 0; i < keyArray.length; i++) {

      // console.log(params.keys[i], params.values[i]);

      state.workData.sceneinfo[params.keys[i]] = params.values[i];

    }

    //


  },

  //修改动画属性
  [types.CHANGEANI](state, params) {
    // debugger
    var aniList = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]].anim;

    // console.log(typeof(state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]].anim));

    // debugger
    if (params.type == "add") {

      var aniObj = {};
      aniObj.type = "none";
      aniObj.duration = 1;
      aniObj.delay = 1;
      aniObj.count = 1;

      aniList.push(aniObj);

    } else if (params.type == "del") {

      // var delAniObj = aniList[params.index];
      // debugger
      aniList.splice(params.index, 1)

    } else if (params.type == "review") {


      for (var i = 0; i < params.anim.length; i++) {

        var aniObj = {};
        aniObj.type = params.anim[i].type;
        aniObj.duration = params.anim[i].duration;
        aniObj.delay = params.anim[i].delay;
        aniObj.count = params.anim[i].count;

        aniList.push(aniObj);
      }
    } else {

      var index = params.index;
      var key = params.key;
      var value = params.value;

      aniList[index][key] = value;


    }

    // debugger
    mutations.SELECTITEM(state, state.checkedItems[0]);
  },

  [types.RELOAD](state, params) {
    state.workData.pages[state.currentPage - 1].elements = params;
  },
  // [types.TEST](state) {
  //   mutations.SELECTITEM(state, state.checkedItems[0]);
  // },
  [types.CLEARANI](state, params) {

    var aniList = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]].anim;
    aniList.splice(0, aniList.length)
  },
  [types.RELOAD](state, params) {
    state.workData.pages[state.currentPage - 1].elements = params;
  },
  [types.TEST](state) {

    // debugger
    var oldHistoryList = state.historyList;
    var items = state.workData.pages[state.currentPage - 1]
    oldHistoryList.push(JSON.stringify(items));
  },
  [types.CHANGEPHONEBUTTON](state, params) {

    var checkItem = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]];
    var properties = checkItem.in.properties;
    var inCssObj = checkItem.in.css;
    var outCssObj = checkItem.out.css;

    if (params.key == "content") {
      checkItem[params.key] = params.value;

    } else if (params.key == "tel") {

      properties.tel = params.value;
    } else if (params.key == "url") {

      properties.url = params.value;
    } else if (params.key == "endtip") {

      properties.endtip = params.value;
    } else if (params.key == "color" || params.key == "backgroundColor" || params.key == "borderStyle" || params.key == "borderColor" || params.key == "borderWidth" || params.key == "borderRadius") {

      inCssObj[params.key] = params.value;
    } else if (params.key == "opacity") {

      outCssObj[params.key] = parseFloat((1 - params.value / 100).toFixed(2));

    } else if (params.key == "transform") {
      // debugger
      outCssObj[params.key] = params.value;
    } else if (params.key == "width" || params.key == "height") {

      outCssObj[params.key] = params.value;
      inCssObj[params.key] = params.value;

      if (params.key == "height") {

        inCssObj['lineHeight'] = params.value + "px";
      }

    }


  },
  [types.CHANGDEADLINETIME](state, params) {
    var checkItem = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]];
    var properties = checkItem.in.properties;
    var inCssObj = checkItem.in.css;

    // properties.deadlineTime = 0;

    properties.deadlineTime = params.value;
    // inCssObj['textAlign'] = "center";

  },

  [types.CHANGEFORM](state, params) {

    var checkItem = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]];
    var properties = checkItem.in.properties;
    var inCssObj = checkItem.in.css;
    var outCssObj = checkItem.out.css;

    if (params.key == "inputType") {

      checkItem[params.key] = params.value;

      if (params.value == 'name') {

        properties.placeholder = "姓名"

      } else if (params.value == 'telephone') {

        properties.placeholder = "手机"
      } else if (params.value == 'email') {

        properties.placeholder = "邮箱"

      } else if (params.value == 'text') {

        properties.placeholder = "文本"
      }

    } else if (params.key == "color" || params.key == "background" || params.key == "borderStyle" || params.key == "borderColor" || params.key == "borderWidth" || params.key == "borderRadius") {

      inCssObj[params.key] = params.value;
    } else if (params.key == "opacity") {

      outCssObj[params.key] = parseFloat((1 - params.value / 100).toFixed(2));

    } else if (params.key == "width" || params.key == "height") {

      outCssObj[params.key] = params.value;
      inCssObj[params.key] = params.value;

      if (params.key == "height") {

        inCssObj['lineHeight'] = params.value + "px";
      }

    } else if (params.key == "transform") {
      // debugger
      outCssObj[params.key] = params.value;
    } else {

      properties[params.key] = params.value;
    }


  },

  [types.COPYSELECTITEM](state) {
    var checkItem = JSON.stringify(state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]]);
    // debugger
    var check = JSON.parse(checkItem)
    state.workData.copyItem = check;

    state.workData.copyItem.out.css.top = parseInt(state.workData.copyItem.out.css.top) + 10 + "";
    state.workData.copyItem.out.css.left = parseInt(state.workData.copyItem.out.css.left) + 10 + "";

  },

  [types.PASTEITEM](state) {
    var copyData = state.workData.copyItem;
    var items = state.workData.pages[state.currentPage - 1].elements;
    if (copyData["out"]) {

      if (state.workData.copyItem.type == 'i' || state.workData.copyItem.type == 's') {

        state.workData.copyItem.formid = state.workData.pages[state.currentPage - 1].id;
        state.workData.copyItem.id = new Date().getTime();
      }

      items.push(state.workData.copyItem);

      mutations.SELECTITEM(state, items.length - 1);
    }

  },
  [types.UPSELECTITEM](state) {
    var items = state.workData.pages[state.currentPage - 1].elements
    var checkItem = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]];
    items = downRecord(items, state.checkedItems[0])
    mutations.SELECTITEM(state, state.checkedItems[0]);

  },
  [types.DOWNITEM](state) {
    // debugger

    var items = state.workData.pages[state.currentPage - 1].elements
    var checkItem = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]];
    items = upRecord(items, state.checkedItems[0])
    mutations.SELECTITEM(state, state.checkedItems[0] - 1);
  },
  [types.STICKIESELECTITEM](state) {
    //放在最后一个
    var items = state.workData.pages[state.currentPage - 1].elements
    var checkItem = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]];
    // debugger
    items = swapItems(items, state.checkedItems[0], items.length - 1)


  },
  [types.BOTTOMSELECTITEM](state) {
    var items = state.workData.pages[state.currentPage - 1].elements;
    var checkItem = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]];
    items = swapItems(items, state.checkedItems[0], 0);
  },

  [types.INITSVGCOLORLIST](state, params) {
    // debugger
    state.workData.svgColors = params;

  },
  [types.CHANGESVGCOLORLIST](state, params) {
    // debugger
    var checkItem = state.workData.pages[state.currentPage - 1].elements[state.checkedItems[0]];
    var obj = checkItem.in.properties.colors;
    
    if(obj instanceof Array){
      if (obj.length == 0) {
        delete obj.css;
        obj.css = {};
      }
    }
    
    checkItem.in.properties.colors['color' + params.index] = params.value

    state.workData.svgColors.colors[params.index] = params.value;

    mutations.SELECTITEM(state, state.checkedItems[0]);
  },
  [types.PROCESSDATA](state, params) {
    state.workData.pages[params.index].elements[params.index1].content = params.data;
  },
  [types.CHECKSCENCESDATA](state, params) {
    state.workData.sceneinfo.name = params.name;
    state.workData.sceneinfo.desc = params.desc;
  }
}

const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
  actions,
  getters,
  mutations: mutations,
  state,
  strict: debug,
})
